<template>
    <!-- <a-layout-footer style="position: fixed; left: 0; right: 0; bottom: 0; text-align: center;"> -->
    <a-layout-footer style="text-align: center;">
      海洋科普网站
    </a-layout-footer>
</template>

<script setup lang="ts">
import store from '@/store';
import { Tool } from '@/utils/tool';
import { notification } from 'ant-design-vue';
import { defineComponent, computed, onMounted } from 'vue';

defineComponent({
    name: 'the-footer'
})

const user = computed(()=>store.state.user);

let websocket: any;
let token:any;

onMounted(()=>{
  if ('WebSocket' in window) {
    token = Tool.uuid(10);  //生成当前客户端token
    //链接
    websocket = new WebSocket(process.env.VUE_APP_WS_SERVER+ '/ws/' + token);
    initWebSocket();  //初始化
  } else {
    alert('当前浏览器不支持');
  }
});

function onOpen() {
  console.log('webSocket链接成功，状态码：', websocket.readyState);

}

function onMessage(event:any) {
  console.log('收到消息', event.data);
  notification['info']({
    message: '收到消息',
    description: event.data
  });
}

function onError() {
  console.log('链接错误', websocket.readyState);
}

function onClose(){
  console.log('链接关闭', websocket.readyState);
}

function initWebSocket() {
  websocket.onopen = onOpen;
  websocket.onmessage = onMessage;
  websocket.onerror = onError;
  websocket.onclose = onClose;
}

</script>